<template>
	<view class="gui-flex gui-rows gui-wrap gui-space-between">
		<view class="gui-product" hover-class="gui-tap" 
		v-for="(item, index) in products" :key="index" 
		:style="{
			width  : (375 - margin*2)+'rpx',
			marginLeft  : margin+'rpx',
			marginRight : margin+'rpx'}"
			@tap="tiao(item.id)"
			>
			<view class="gui-relative gui-img-in">
				<text v-if="item.lei==4" class="gui-badge gui-bg-red gui-badge-absolute gui-color-white">社区团购</text>
				<text v-if="0" class="gui-badge gui-bg-red gui-badge-absolute gui-color-white"></text>
				<gui-image :src="item.img" :width="(375 - margin*2)" :height="imgHeight"></gui-image>
			</view>
			<view class="gui-product-lines" style='padding: 5rpx;'>
				<text class="gui-product-name" style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; -webkit-box-orient: vertical;padding: 5rpx;">{{item.name}}</text>
			</view>
			<view class="gui-product-lines gui-flex gui-rows gui-nowrap gui-align-items-center gui-space-between">
				<text>
					<text class="gui-color-red gui-text-small">￥</text>
					<text class="gui-h5 gui-color-red">{{item.price}}</text>
				</text>
				<text class="gui-text-small gui-color-gray  gui-price-margin">销售：{{item.priceMarket}}</text>
			</view>
		</view>
	</view>
</template>
<script>
export default{
	props : {
		products    : {type : Array,  default : function(){return [];}},
		margin      : {type : Number, default : 15},
		imgHeight   : {type : Number, default : 345},
		lujing:{
			type:String,
			default:''
		}
	},
	onShow() {
		
	},
	methods:{
		tiao(e){
			uni.navigateTo({
				url:this.lujing+'?id='+e
			})
		}
	},
	
}
</script>
<style>
.gui-product{
	margin-bottom:18rpx;
	padding: 2rpx;
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 10rpx;
	/* box-shadow: 0 0 20rpx #e2e2e2; */
	overflow: hidden;
}
.gui-product-lines{margin-top:10rpx;}
.gui-product-name{font-size:26rpx; line-height:32rpx;}
.gui-price-margin{margin:0 10rpx;}
</style>
